import 'package:flutter/material.dart';
import 'package:hook_up_rent/pages/home/tab_search/filter_bar/data.dart';
import 'package:hook_up_rent/scoped_model/room_filter.dart';
import 'package:hook_up_rent/utils/scoped_model_helper.dart';
import 'package:hook_up_rent/widgets/commom_title.dart';

class FilterDrawer extends StatelessWidget {
  const FilterDrawer({super.key});

  @override
  Widget build(BuildContext context) {
    var dataList = ScopedModelHelper.getModel<FilterBarModel>(context).dataList;
    roomTypeList = dataList['roomTypeList']!;
    orientedList = dataList['orientedList']!;
    floorList = dataList['floorList']!;
    var selectedList = ScopedModelHelper.getModel<FilterBarModel>(context)
        .selectedList
        .toList();
    _onChange(String val) {
      ScopedModelHelper.getModel<FilterBarModel>(context)
          .selectedListTroggleItem(val);
    }

    return Drawer(
      child: SafeArea(
        child: ListView(
          children: [
            CommonTitle('户型'),
            FilterDrawItem(
              list: roomTypeList,
              selectedIds: selectedList,
              onChange: _onChange,
            ),
            CommonTitle('朝向'),
            FilterDrawItem(
              list: orientedList,
              selectedIds: selectedList,
              onChange: _onChange,
            ),
            CommonTitle('楼层'),
            FilterDrawItem(
              list: floorList,
              selectedIds: selectedList,
              onChange: _onChange,
            ),
          ],
        ),
      ),
    );
  }
}

class FilterDrawItem extends StatelessWidget {
  final List<GeneralType> list;
  final List<String> selectedIds;
  final ValueChanged<String>? onChange;
  const FilterDrawItem({
    Key? key,
    required this.list,
    required this.selectedIds,
    this.onChange,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 10),
      child: Wrap(
        spacing: 10,
        runSpacing: 10,
        children: list.map((item) {
          var isActive = selectedIds.contains(item.id);
          return GestureDetector(
            onTap: () {
              if (onChange != null) onChange!(item.id);
            },
            behavior: HitTestBehavior.translucent,
            child: Container(
              width: 100,
              height: 40,
              decoration: BoxDecoration(
                  color: isActive ? Colors.green : Colors.white,
                  border: Border.all(width: 1, color: Colors.green)),
              child: Center(
                  child: Text(item.name,
                      style: TextStyle(
                        color: isActive ? Colors.white : Colors.green,
                      ))),
            ),
          );
        }).toList(),
      ),
    );
  }
}
